<template>
  <div>
    <nav-bar title="动火作业详情"></nav-bar>
    <div class="maxinBox" v-if="hotCardDetails">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            申请详情
          </div>
        </van-col>
      </van-row>
      <van-cell title="申请人" :value="hotCardDetails.applicant || '--'"/>
      <van-cell title="性别" :value="hotCardDetails.sex === '1' ? '男' : '女'"/>
      <van-cell title="手机号码" :value="hotCardDetails.mobile || '--'"/>
      <van-cell title="班组" :value="hotCardDetails.team || '--'"/>
      <van-cell title="工种" :value="hotCardDetails.workType || '--'"/>
      <van-cell title="申请日期" :value="hotCardDetails.applyDate | formatDate('YYYY/MM/DD')"/>
      <van-row>
        <van-col :span="24" class="title">
          <div>
            证件详情
          </div>
        </van-col>
      </van-row>
      <van-cell v-if="hotCardDetails.fireLevel === 1" title="动火级别" value="I级"/>
      <van-cell v-else-if="hotCardDetails.fireLevel === 2" title="动火级别" value="II级"/>
      <van-cell v-else title="动火级别" value="III级"/>
      <van-cell title="许可证状态" v-if="hotCardDetails.licenseStatus === '1'" value="待审批"/>
      <van-cell title="许可证状态" v-else-if="hotCardDetails.licenseStatus === '2'" value="已通过"/>
      <van-cell title="许可证状态" v-else-if="hotCardDetails.licenseStatus === '3'" value="已驳回"/>
      <van-cell title="许可证状态" v-else value="已过期"/>
      <van-cell title="监护人" :value="hotCardDetails.guardian || '--'"/>
      <van-cell title="生效日期" :value="hotCardDetails.effectDate | formatDate('YYYY/MM/DD')"/>
      <van-cell title="终止日期" :value="hotCardDetails.invalidDate | formatDate('YYYY/MM/DD')"/>
      <van-cell title="证件照片"/>
      <van-row>
        <van-col :span="8" style="padding: 1.25rem 0.625rem">
          <img style="width: 100%;" :src="hotCardDetails.licenseUrl" @click="bigAvatar(hotCardDetails.licenseUrl)">
        </van-col>
      </van-row>
      <div v-if="user && user.userType === '01' && hotCardDetails.licenseStatus === '1'">
        <van-field
          type="texearea"
          required
          v-model="form.content"
          name="审批意见"
          label="审批意见"
          placeholder="请输入审批意见"
        />
        <div class="marginTop5 center" style="padding: 0.3125rem 1.25rem;">
          <van-button type="danger" native-type="onSubmit" @click="onResult(3)">
            驳回
          </van-button>
          <van-button type="info" native-type="onSubmit" @click="onResult(2)">
            通过
          </van-button>
        </div>
      </div>
      <div v-if="user && user.userType !== '01' && hotCardDetails.licenseStatus !== '1'">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              审批详情
            </div>
          </van-col>
        </van-row>
        <!-- <van-cell title="审批状态" :value="hotCardDetails.approveStatus || '--'"/> -->
        <van-cell title="审批人" :value="hotCardDetails.approveUser || '--'"/>
        <van-cell title="审批时间" v-if="hotCardDetails.approveDate" :value="hotCardDetails.approveDate | formatDate('YYYY-MM-DD')"/>
        <van-cell title="审批时间" v-else value="--"/>
        <van-cell title="审批意见" :value="hotCardDetails.approveIdea || '--'"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import hotCardManageAPI from '../../../../api/workAPI/hotCardManageAPI.js'
  export default {
    data() {
      return {
        form: {
          content: ''
        },
        hotCardDetails: null,
        user: {
          userStatus: '',
          userType: '',
        }
      }
    },
    methods: {
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
      // 动火证详情
      getHotCardDetails() {

        hotCardManageAPI.getHotCardDetails(JSON.parse(localStorage.getItem('hotCardDetails')).id).then(res => {
          this.hotCardDetails = res
        })
      },
      // 动火证审批
      onResult(status) {
        if (status === 3) {
          if (this.form.content === '') {
            this.$toast.fail('审批意见不能为空')
            return
          }
        }
        let data = {
          result: status,
          approveId: this.$route.params.itemData.id,
          content: this.form.content
        }
        hotCardManageAPI.approvalHotCard(data).then(res => {
          this.$toast.success('审批完成')
          this.$router.push({
            name: 'HotCardManage'
          })
        })
      }
    },
    mounted() {
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getHotCardDetails()
    }
  }
</script>

<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
